{{ context.resources }}
{{ context.components[0] }}

<script>
    setTimeout(init, 50);

    function getDefaultNumPerPage(){
        return 9;
    }

    function getPaginationThreshold(){
        return 18;
    }

    function init() {
        const tableRows = document.querySelectorAll('.tabledata-{{ context.rnd }} tr');
        highlightTableValue(tableRows, '#f00');
        scientificNotationStrip(tableRows);

        if(document.getElementsByClassName("fig-{{ context.rnd }}").length < getPaginationThreshold()){
            document.getElementById("pagination-{{ context.rnd }}").style.display = "none";
            document.getElementById("num-of-plots-{{ context.rnd }}").style.display = "none";
        }
        else {
            document.getElementById('num-per-page-{{ context.rnd }}').value = getDefaultNumPerPage();
            paginateVariables();
        }
    }

    function switchPage{{ context.rnd }}(e) {
        const pageTo = e.id.replace('switch', 'page');
        const pageBox = document.getElementById(pageTo);
        const pageBoxAll = document.getElementsByClassName('page-box-{{ context.rnd }}');
        for (let i of pageBoxAll) {
            i.style.display = 'none';
        }
        for (let i of document.querySelectorAll('.page-switch-{{ context.rnd }} li')) {
            i.style.backgroundColor = 'white';
        }
        pageBox.style.display = 'block';
        e.style.backgroundColor = '#5DADE2';
    }

    function highlightTableValue(element, color) {
        for (let i of element) {
            let thValue = i.firstElementChild.innerText;
            let tbValue = i.lastElementChild.innerText;
            if (thValue.includes('Distinct') && tbValue > 50) {
                i.style.color = color;
            } else if (thValue.includes('Unique') && tbValue.replace('%',
                    '') == 100) {
                i.style.color = color;
            } else if (thValue.includes('Missing') && tbValue.replace('%',
                    '') != 0) {
                i.style.color = color;
            } else if (thValue.includes('Zeros') && tbValue.replace('%',
                    '') != 0) {
                i.style.color = color;
            } else if (thValue.includes('Infinite') && tbValue.replace('%',
                    '') != 0) {
                i.style.color = color;
            } else if (thValue.includes('Skewness' && tbValue > 20)) {
                i.style.color = color;
            }
        }
    }

    function scientificNotationStrip(element) {
        for (let i of element) {
            let tbValue = i.lastElementChild.innerHTML;
            if (!isNaN(tbValue)) {
                if (tbValue.includes('e+')) {
                    let newValue = tbValue.replace('e+', '×10<sup>') + '</sup>';
                    i.lastElementChild.innerHTML = newValue;
                } else if (tbValue.includes('e-')) {
                    let newValue = tbValue.replace('e', '×10<sup>') + '</sup>';
                    i.lastElementChild.innerHTML = newValue;
                }
            }
        }
    }

    function copyParam(e) {
        const buttonText = e.innerText;
        const paramElement = e.parentElement.childNodes;
        let param = '';
        for (let i of paramElement) {
            if (i.nodeName === 'DIV') {
                const nodeParam = i.firstElementChild.innerText;
                param = param + nodeParam + ', ';
            }
        }
        navigator.clipboard.writeText(param).then(
            () => {
                e.innerText = 'Copied to Clipboard!';
                setTimeout(() => {
                    e.innerText = buttonText;
                }, 1500);
            }
        ).catch(
            error => {
                e.innerText = error;
                setTimeout(() => {
                    e.innerText = buttonText;
                }, 1500);
            }
        )
    }

    function increaseNum() {
        let button = document.getElementById('increase-num-per-page-{{ context.rnd }}');
        button.disabled = true;
        let value = parseInt(document.getElementById('num-per-page-{{ context.rnd }}').value, 10);
        value = isNaN(value) ? getDefaultNumPerPage() : value;
        value++;
        document.getElementById('num-per-page-{{ context.rnd }}').value = value;
        paginateVariables();
        button.disabled = false;
    }

    function decreaseNum() {
        let button = document.getElementById('decrease-num-per-page-{{ context.rnd }}');
        button.disabled = true;
        let value = parseInt(document.getElementById('num-per-page-{{ context.rnd }}').value, 10);
        value = isNaN(value) ? getDefaultNumPerPage() : value;
        value--;
        if(value < 1){
          value = 1;
        }
        document.getElementById('num-per-page-{{ context.rnd }}').value = value;
        paginateVariables();
        button.disabled = false;
    }

    function changeNum() {
        let value = parseInt(document.getElementById('num-per-page-{{ context.rnd }}').value, 10);
        value = isNaN(value) ? getDefaultNumPerPage() : value;
        if(value < 1){
          return;
        }
        paginateVariables();
    }

    function paginateVariables(){
        jQuery(function($) {
            let items = $(".fig-{{ context.rnd }}");
            let pagination = $(".pagination-{{ context.rnd }}");
            let numItems = items.length;
            if(numItems < getPaginationThreshold()){
                return;
            }
            let perPage = parseInt(document.getElementById('num-per-page-{{ context.rnd }}').value, 10);
            perPage = isNaN(perPage) ? getDefaultNumPerPage() : perPage;

            items.slice(perPage).hide();

            pagination.pagination({
                items: numItems,
                itemsOnPage: perPage,
                cssStyle: "light-theme",
                onPageClick: function(pageNumber) {
                    let showFrom = perPage * (pageNumber - 1);
                    let showTo = showFrom + perPage;
                    items.hide().slice(showFrom, showTo).show();
                }
            });

            function checkFragment() {
                let hash = window.location.hash || "#page-1";
                hash = hash.match(/^#page-(\d+)$/);
                if(hash) {
                    let pageNum =  parseInt(hash[1]);
                    if(pageNum * perPage <= (Math.ceil(numItems/perPage) * perPage)){
                        pagination.pagination("selectPage", pageNum);
                    }
                    else{
                        pagination.pagination("selectPage", 1);
                    }
                }
            };

            $(window).bind("popstate", checkFragment);
            checkFragment();
        });
    }
</script>